import React, { useRef } from 'react'
import './MydesignBott.css'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
//引入分页模块
import PagingList from '../../SelectedTemplates/PagingList/pagingList'
// 引入长页动画模块
import Animation from '../../SelectedTemplates/AnimationList/animation'

import Normalimage from '../../SelectedTemplates/Normalimage/Normal'
import NormalAnimal from '../../SelectedTemplates/NormalAnimal/normal'
const Index: React.FC = () => {
  // 创建一个引用来获取容器元素
  const containerRefBox = useRef<HTMLDivElement>(null);
  //  定义滑动到右侧的函数
  const scrollRight1 = () => {
    if (containerRefBox.current) {          //每次滚动的距离    平滑滚动
      containerRefBox.current.scrollBy({ left: 600, behavior: 'smooth' });
    }
  }
  // 定义滑动到左侧的函数
  const scrollLeft1 = () => {
    if (containerRefBox.current) {     //每次滚动的距离    平滑滚动
      containerRefBox.current.scrollBy({ left: -600, behavior: 'smooth' });
    }
  }
  return (
    <div className='MydesignBott_Box'>
      <div className='MydesignBott_title'><h2>精选模版</h2><p>查看更多{'>'}</p></div>
      <div className='MydesignBott_text' ref={containerRefBox}>
        {/* 左按钮 */}
        <button onClick={scrollLeft1} className='leftCon_Btn'><LeftOutlined /></button>
        {/* 右按钮 */}
        <button onClick={scrollRight1} className='rightCon_Btn'><RightOutlined /></button>
        {/* 内容 */}
        <div className='MydesignBott_Con' >
          <div className="Design_Container">
            <PagingList></PagingList>
          </div>
          <div className="Design_Container">
            <img style={{ width: '100%', height: '300px' }} src="https://pub-cdn-oss.chuangkit.com/designTemplate/2022/09/29/ef00fad1-3c7b-45e1-b0a8-c212c36261c7_thumb_gif?v=1717956764000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fgif/cgif/35" alt="" />
            <div className='Design_text1'>
              <img src="https://img2.baidu.com/it/u=1315677857,2459857167&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="" />
              <h4>复古风米粉面条促销海报</h4>
            </div>
          </div>
          <div className="Design_Container">
            <Animation></Animation>
          </div>
          <div className="Design_Container">
            <img style={{ width: '100%', height: '300px' }} src="https://pub-cdn-oss.chuangkit.com/designTemplate/2022/12/12/54638df4-f699-4fd5-ad53-0e4a026ec547_thumb_gif?v=1684816861000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fgif/cgif/35" alt="" />
            <div className="Design_text2">
              <img src="https://img2.baidu.com/it/u=1315677857,2459857167&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="" />
              <h4>图文风【视频】旅游行业轻酸性风日签</h4>
            </div>

          </div>
          <div className="Design_Container">
            <Normalimage></Normalimage>
          </div>
          <div className="Design_Container">
            <NormalAnimal></NormalAnimal>
          </div>
        </div>
      </div>

    </div >
  )
}

export default Index